<template>
	<view class="home">
		<swiper indicator-dots autoplay :interval=1500 circular>
			<swiper-item v-for="item in swiperList" :key="item.id">
				<image :src="item.img">
				</iamge>
			</swiper-item>
		</swiper>
		
		<view class="nav">
			<view class="nav_item" v-for="item in navs" :key="item.title" @click="navItemClick(item.path)">
				<view :class="item.icon">
				</view>
				<text>{{item.title}}</text>
			</view>
			<!-- <view class="nav_item">
				<view class="iconfont icon-guanyuwomen">
				</view>
				<text>联系我们</text>
			</view>
			<view class="nav_item">
				<view class="iconfont icon-tupian">
				</view>
				<text>社区图片</text>
			</view>
			<view class="nav_item">
				<view class="iconfont icon-shipin">
				</view>
				<text>学习视频</text>
			</view> -->
		</view>
		
		<!-- 推荐商品 -->
		<view class="tuijian_goods">
			<view class="tit">
				推荐商品
			</view>
			<!-- 每一个列表项  数据请求是需要一定时间的  只有当有数据后才能渲染uni:if="{{hotGoots.length > 0}}"-->
			<!-- <view class="good_list" uni:if="{{hotGoots.length > 0}}">
				<view class="goods_item" v-for="item in hotGoots" :key="item.id" >
					<image :src="item.img_url" mode=""></image>
					<view class="price">
						<text>¥{{item.sell_price}}</text>
						<text>¥{{item.market_price}}</text>
					</view>
					<view class="goods_name">
						{{item.title}}
					</view>
				</view>
			</view> -->
			<goods-list :hotGoots="hotGoots" @goodsDetails="goGoodsDetail"></goods-list>
		</view>
		
	</view>

</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	import baseURL from '../../utils/request.js'
	export default {
		components: {
			"goods-list":goodsList
		},
		data() {
			return {
				swiperList: [],
				// 热门商品列表
				hotGoots:[],
				// 这里用到了抽离的思想
				navs: [
					{
						icon:'iconfont icon-ziyuan',
						title:'黑马超市',
						path:'/pages/goods/goods'
					},
					{
						icon:'iconfont icon-guanyuwomen',
						title:'联系我们',
						path:'/pages/contact/contact'
					},
					{
						icon:'iconfont icon-tupian',
						title:'社区图片',
						path:'/pages/pics/pics'
					},
					{
						icon:'iconfont icon-shipin',
						title:'学习视频',
						path:'/pages/videos/videos'
					}
				]
			}
		},
		onLoad() {
			// 获取轮播图
			this.getSwiper()
			// 热门商品列表
			this.getHotGoods()
		},
		methods: {
			// 封装的请求是一个 promise 需要用await async 
			async getSwiper() {
				const res = await this.$http({
					url: '/api/getlunbo'
				})
				this.swiperList = res.data.message
				// console.log(res)
				
				// uni.request({
				// 	// url: `${baseURL}/api/getlunbo`,
				// 	url: baseURL + '/api/getlunbo',
				// 	success: (res) => {
				// 		console.log(res.data);
				// 		if(res.data.status !== 0) {
				// 			return uni.showToast({
				// 				title:'获取数据失败'
				// 			})
				// 		}
				// 		// 失败的话就走不到下面
				// 		this.swiperList = res.data.message
				// 		console.log(this.swiperList);
				// 	}
				// })
			},
			async getHotGoods() {
				const res = await this.$http({
					url: '/api/getgoods?pageindex=1'
				})
				this.hotGoots = res.data.message
				// console.log(111,res.data.message)
			},
			// 导航点击跳转的函数
			navItemClick(path) {
				uni.navigateTo({
					url:path
				})
				console.log(path)
			},
			// 点击商品跳转到 详情页面 因为是封装的子组件 所以在子组件里$emit 触发事件
			goGoodsDetail(id) {
				uni.navigateTo({
					url:'../goodsDetail/goodsDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	swiper {
		width: 750rpx;
		height: 380rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.nav {
		display: flex;
		.nav_item {
			width: 25%;
			text-align: center;
			view {
				width: 120rpx;
				height: 120rpx;
				background-color: $shop-color;
				//  上下10 居中对齐
				margin: 10px auto;
				border-radius: 50%;
				line-height: 120rpx;
				color: #fff;
				font-size: 50rpx;
			}
			.icon-tupian {
				font-size: 43rpx;
			}
			text {
				font-size: 30rpx;
			}
			
		}
	}
	
	.tuijian_goods {
		background-color: #eee;
		overflow: hidden;
		margin-top: 25rpx;
		.tit {
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: $shop-color;
			background-color: #fff;
			margin: 10rpx 0;
			letter-spacing: 20px;
			font-weight: 700;
		}
	}
	
	// .good_list {
	// 	display: flex;
	// 	padding: 0 15rpx;
	// 	// 子盒子有宽度 所以设置换行会下来
	// 	flex-wrap: wrap;
	// 	// 两侧贴边对齐
	// 	justify-content: space-between;
	// 	.goods_item {
	// 		background-color: #fff;
	// 		width: 355rpx;
	// 		margin: 10rpx 0;
	// 		padding: 15rpx;
	// 		box-sizing: border-box;
	// 		image {
	// 			width: 80%;
	// 			height: 150px;
	// 			display: block;
	// 			margin: auto;
	// 		}
	// 		.price {
	// 			margin: 10rpx 0;
	// 			color: $shop-color;
	// 			font-size: 36rpx;
	// 			text:nth-child(2) {
	// 				color: #ccc;
	// 				font-size: 28rpx;
	// 				margin-left: 17rpx;
	// 				text-decoration: line-through;
	// 			}
	// 		}
	// 		.goods_name {
	// 			font-size: 28rpx;
	// 			line-height: 50rpx;
	// 			padding-bottom: 15rpx;
	// 		}
	// 	}
	// }
	
</style>
